<template>
  <div>
    <!-- 账户管理 -->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @resetChange="resetChange" @onCollapse="collapseHandle" :labelWidth="110"></TopFilter>

    <FilterTable
      ref="table"
      columnsRef="qjhAccountManage"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => (this.columns = columns)"
      :onSyncTableData="tableDataChange"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button size="small" type="primary" :disabled="isCold" @click="ifFreezeHandle(60581003)">冻 结</multiuse-button>
        <multiuse-button size="small" type="primary" :disabled="isHot" @click="ifFreezeHandle(60581001)">解 冻</multiuse-button>
      </template>
    </FilterTable>
    <BaseDialog :visible.sync="visible" title="余额锁定明细" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SonModel :rowData="formData" @close="emitCloseHandler" />
    </BaseDialog>

    <BaseDialog :visible.sync="isDealer" title="经销商查询" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <SearchDealer :rowData="formData" @close="emitCloseHandler1" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryList, ifFreezeData, getFiAccountType } from '@/api/omFinance/MoneyManage/AccountManage';
import { getDealerUser } from '@/api/omFinance';
import SonModel from './SonModel';
import SearchDealer from '../ownerSeacher';

export default {
  name: 'AccountManage',
  mixins: [dictionary],

  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryList,
      fetchParams: {},
      formData: {},
      visible: false,
      isDealer: false,
      isCold: true,
      isHot: true,
      ids: []
    };
  },
  components: {
    SonModel,
    SearchDealer
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.accountType();
    this.getUser();
  },
  methods: {
    async getUser() {
      let res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.userName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'updatedBy').editItems = empList; //操作姓名
      this.columns.find(item => item.dataIndex === 'updatedBy').filterItems = empList;
    },
    changeHandle(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    resetChange(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    selectChangeHandle(rows) {
      this.ids = [];
      if (rows.length > 0) {
        this.isCold = !rows.every(x => x.status == 60581001);
        this.isHot = !rows.every(x => x.status == 60581003);
        rows.map(x => {
          this.ids.push(x.id);
        });
        return;
      }
      this.isCold = true;
      this.isHot = true;
    },
    // 禁用行checkbox选中
    tableDataChange(data, isFirst) {
      if (isFirst) {
        let disabledSelect = data.filter(row => row.status === 60581002);
        this.$refs.table.$refs.pageTable.SET_DISABLE_SELECT(disabledSelect);
      }
    },
    seacherFun() {
      this.isDealer = true;
    },

    detailHandle(row) {
      this.visible = true;
      this.formData = row;
    },
    emitCloseHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    emitCloseHandler1(val, data) {
      this.isDealer = val;
      if (data) {
        let dealerCodes = [];
        let dealerNames = [];
        data.map(x => {
          dealerCodes.push(x.dealerCode);
          dealerNames.push(x.dealerName);
        });
        this.topFilterList.find(x => x.fieldName == 'ownerCode').initialValue = dealerCodes.toString();
      }
    },
    // 资金类型 getFiAccountType
    async accountType() {
      const res = await getFiAccountType({ ignoreAccountTypes: [60361001, 60361002] });
      if (res.resultCode === 200) {
        res.data.map(x => {
          this.topFilterList.find(item => item.fieldName == 'accountTypeId').itemList.push({ text: x.accountTypeName, value: x.id });
        });
      }
    },
    // 冻结/解冻
    async ifFreezeHandle(type) {
      let str = type == 60581003 ? '冻结' : '解冻';
      await this.$confirm(`是否${str}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let params = {
            status: type,
            ids: this.ids
          };
          const res = await ifFreezeData(params);
          if (res.resultCode == 200) {
            this.fetchParams = { ...this.fetchParams };
          }
        })
        .catch(() => {});
    },

    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'ownerCode',
          placeholder: '请选择',
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.seacherFun()}></el-button>
              </div>
            );
          },
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'ownerName',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '资金类型',
          fieldName: 'accountTypeId',
          placeholder: '请选择',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '账户状态',
          fieldName: 'status',
          placeholder: '请选择',
          itemList: this.createDictList('2401')
          //  itemList:[{text:"有效",value:60581001}
          //  ,{text:"冻结",value:60581003}]
        },
        // {
        //   type: 'SELECT',
        //   label: '动力形式',
        //   fieldName: 'powerType',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('6008')
        // }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'ownerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商名称',
          dataIndex: 'ownerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '资金类型',
          dataIndex: 'accountTypeName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '账户名称',
        //   dataIndex: 'accountName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '账户总额',
          dataIndex: 'balanceAmount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          numberFormat: true
        },
        {
          title: '预扣',
          dataIndex: 'frozenAmount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          numberFormat: true,
          render: props => {
            if (props.row.frozenAmount > 0) {
              return (
                <el-link type="warning" underline={true} onClick={() => this.detailHandle(props.row)}>
                  {props.row.frozenAmount}
                </el-link>
              );
            } else {
              return <span>{props.row.frozenAmount}</span>;
            }
          }
        },
        {
          title: '可用余额',
          dataIndex: 'availableAmount',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          numberFormat: true
        },
        {
          title: '三方已到期',
          dataIndex: 'ifExpireDate',
          sorter: true,
          filter: true,
          filterType: 'input',
          precision: 2,
          numberFormat: true
        },

        {
          title: '账户状态',
          dataIndex: 'status',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('2401'),
          render: props => {
            return <span>{this.createDictText(props.row.status, '2401')}</span>;
          }
        },
        {
          title: '最后更新时间',
          dataIndex: 'updatedAt',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作人',
          dataIndex: 'updatedBy',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editItems: []
        }
      ];
    }
  }
};
</script>
